<template>
  <li v-if="comment">
      <div class="userImg">
          <img :src="comment.user.avatarUrl" />
      </div>
      <div class="right">
          <div class="username">
              <span>{{comment.user.nickname}}</span>
              <div class="beLike">
                <span class="likecount">{{comment.likedCount}}</span>
                <img src="../assets/images/good.png" alt="">
              </div>
          </div>
          <div class="time">{{comment.time | unixToDate2}}</div>
          <div class="content">
               <div v-if="comment.beReplied.length" class="reply">
                    <span>回复</span>
                    <span 
                        v-for="item in comment.beReplied" 
                        :key="item.user.userId"
                        style="color:#5380b2"
                    >
                        @{{ item.user.nickname }}:
                    </span>
               </div>
               <span :class="{comment:!comment.beReplied.length}">{{comment.content}}</span>
                <div class="beReply" 
                    v-if="comment.beReplied.length"
                >
                    <p
                        v-for="item in comment.beReplied"
                        :key="item.user.userId"
                    >
                        @{{item.user.nickname}}: {{item.content}}
                    </p>
                </div>
            </div>
      </div>
  </li>
</template>

<script>
export default {
    props:["comment"],
}
</script>

<style lang="less" scoped>
li{
    font-size: 14px;
    padding: 5px 10px;
    width: 100%;
    display: flex;
    .userImg{
        width: 30px;
        height: 30px;
        img{
            width: 100%;
            border-radius: 50%;
        }
    }
    .right{
        flex: 1;
        margin-left: 10px;
        border-bottom: 1px solid rgb(228, 225, 225);
        .time{
            font-size: 9px;
            color: #999;
        }
        .username{
            display: flex;
            justify-content: space-between;
            align-items: center;
            .beLike{
                padding: 5px;
                .likecount{
                    color: #aca9a9;
                    font-size: 13px;
                }
                img{
                    margin-left: 5px;
                    width: 15px;
                }
            }
        }
        .content{
            font-size: 15px;
            .reply{
                display: inline-block;
                margin: 10px 0 0 0;
                &:last-child::after{
                    content: ":";
                }
            }
            .comment{
                display: block;
                margin: 10px 0;
            }
            .beReply{
                border: 1px solid rgb(228, 225, 225);
                margin:  10px 0 15px 0;
                padding:10px;
                color: rgb(100, 97, 97);
            }
        }
    }
}
</style>